<template>
	<view>
		<uni-transition :duration="300" :mode-class="['fade']" :styles="maskClass" @click="togglePopup"
			:show="isPopupShow">
		</uni-transition>
		<uni-transition :duration="260" :mode-class="['slide-bottom']" :styles="popupTransfromClass"
			:show="isPopupShow">
			<view class="payment-method-wrapper">
				<view class="title">选择支付方式</view>
				<view class="payment-method">
					<view class="payment-method-item" @click="selectPayMethod(1)">
						<image src="/static/balance.png" class="icon"></image>
						<view class="text">余额支付</view>
						<view class="checkbox-wrapper" :class="{'on': currentPayMethod == 1}">
							<image class="checkbox on" src="/static/checkbox_on.png"></image>
							<image class="checkbox off" src="/static/checkbox.png"></image>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="payment-method-item wechat" @click="selectPayMethod(2)">
						<image src="/static/wechat.png" class="icon"></image>
						<view class="text">微信支付</view>
						<view class="checkbox-wrapper" :class="{'on': currentPayMethod == 2}">
							<image class="checkbox on" src="/static/checkbox_on.png"></image>
							<image class="checkbox off" src="/static/checkbox.png"></image>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<view class="payment-method-item alipay" @click="selectPayMethod(3)">
						<image src="/static/alipay.png" class="icon"></image>
						<view class="text">支付宝支付</view>
						<view class="checkbox-wrapper" :class="{'on': currentPayMethod == 3}">
							<image class="checkbox on" src="/static/checkbox_on.png"></image>
							<image class="checkbox off" src="/static/checkbox.png"></image>
						</view>
					</view>
					<!-- #endif -->
				</view>
				<button type="default" :disabled="submitFlag || !currentPayMethod || !orderId" class="bottom-menu"
					@click="handleConfirmPay">确定支付</button>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import uniTransition from '@/components/uni-transition/uni-transition.vue'
	export default {
		components: {
			uniTransition
		},
		props: {
			isPopupShow: {
				type: Boolean,
				default: false
			},
			submitFlag: {
				type: Boolean,
				default: false
			},
			payMethod: {
				type: String,
				default: ''
			},
			orderId: {
				type: String,
				orderId: ''
			}
		},
		data() {
			return {
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'z-index': 10,
					'background-color': 'rgba(0, 0, 0, 0.6)'
				},
				popupTransfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'left': 0,
					'right': 0,
					'z-index': 11,
					'padding-bottom': '100rpx',
					'background-color': '#fff'
				}
			}
		},
		computed: {
			currentPayMethod: {
				get() {
					return this.payMethod
				},
				set(val) {
					this.$emit('update:payMethod', val)
				}
			}
		},
		watch: {},
		methods: {
			// 支付方式
			selectPayMethod(payMethod) {
				this.currentPayMethod = payMethod
			},
			handleConfirmPay() {
				this.$emit('handleConfirmPay', 'fu')
			},
			togglePopup() {
				this.$emit('togglePopup', !this.isPopupShow)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.payment-method-wrapper {
		margin: 0 25rpx 0;

		.title {
			line-height: 80rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.payment-method {
			padding: 9rpx 0;
			background: #FFFFFF;
			border-radius: 10rpx;

			.payment-method-item {
				display: flex;
				align-items: center;
				padding: 24rpx 25rpx 24rpx 19rpx;

				.icon {
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					flex: 1;
					margin-left: 19rpx;
					line-height: 36rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}

	.checkbox-wrapper {
		display: flex;
		align-items: center;

		.checkbox {
			width: 28rpx;
			height: 28rpx;

			&.on {
				display: none;
			}

			&.off {
				display: block;
			}
		}

		&.on {
			.checkbox.on {
				display: block;
			}

			.checkbox.off {
				display: none;
			}
		}
	}

	.bottom-menu {
		margin: 15rpx 25rpx 10rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
		border-radius: 45rpx;
	}
</style>
